<template>
    <div class="main-container">
        <div style="background-color: #fff; height:100%" id="DPMBasicInformation">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="程序类型定义" key="1">
                    <div style="height: 100%;">
                        <ProgramType></ProgramType>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="程序号定义" key="2">
                    <div style="height: 100%;">
                        <ProgramNumber></ProgramNumber>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="染色工序名称定义" key="3">
                    <div style="height: 100%;">
                        <DyeingProcessName></DyeingProcessName>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="化工料维护定义" key="4">
                    <div style="height: 100%;">
                        <ChemicalMaintenance></ChemicalMaintenance>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="操作步骤定义" key="5">
                    <div style="height: 100%;">
                        <Procedure></Procedure>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="浓度单位定义" key="6">
                    <div style="height: 100%;">
                        <ConcentrationUnits></ConcentrationUnits>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="配方单性质定义" key="7">
                    <div style="height: 100%;">
                        <FormulationSingleNature></FormulationSingleNature>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="程序配方2022定义" key="8">
                    <div style="height: 100%;">
                        <ProcedureRecipe2022></ProcedureRecipe2022>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="布种吸水率定义" key="9">
                    <div style="height: 100%;">
                        <ClothSuckwater></ClothSuckwater>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="配方用料定义" key="10">
                    <div style="height: 100%;">
                        <FormulationMaterials></FormulationMaterials>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="工艺步骤定义" key="11">
                    <div style="height: 100%;">
                        <ProcessSteps></ProcessSteps>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="染色工艺步骤定义" key="12">
                    <div style="height: 100%;">
                        <DyeingProcessSteps></DyeingProcessSteps>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="主泵喷嘴风机机速定义" key="13">
                    <div style="height: 100%;">
                        <FanSpeed></FanSpeed>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="中控机台表定义" key="14">
                    <div style="height: 100%;">
                        <CentralControlMachine></CentralControlMachine>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="作业类型定义" key="15">
                    <div style="height: 100%;">
                        <JobType></JobType>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue'
import emitter from '@/hooks/useEventBus'
export default defineComponent({
    name: 'DPMBasicInformation',
    setup() {
        const pageData = reactive({
            tableIndex: "1"
        })
        const tabsChange = (e: string | number) => {
            emitter.emit('window-change')
            if (e === '1') {
                emitter.emit('ProgramType')
            } else if (e === '2') {
                emitter.emit('ProgramNumber')
            } else if (e === '3') {
                emitter.emit('DyeingProcessName')
            } else if (e === '4') {
                emitter.emit('ChemicalMaintenance')
            } else if (e === '5') {
                emitter.emit('Procedure')
            } else if (e === '6') {
                emitter.emit('ConcentrationUnits')
            } else if (e === '7') {
                emitter.emit('FormulationSingleNature')
            } else if (e === '8') {
                emitter.emit('ProcedureRecipe2022')
            } else if (e === '9') {
                emitter.emit('ClothSuckwater')
            }else if (e === '10') {
                emitter.emit('FormulationMaterials')
            } else if (e === '11') {
                emitter.emit('ProcessSteps')
            } else if (e === '12') {
                emitter.emit('DyeingProcessSteps')
            } else if (e === '13') {
                emitter.emit('FanSpeed')
            }else if (e === '14') {
                emitter.emit('CentralControlMachine')
            }else if (e === '15') {
                emitter.emit('JobType')
            }
        }
        return {
            pageData,
            tabsChange
        }
    }
})
</script>
<style scoped>
.main-container {
    height: 100%;
}
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>